<template>
	<view class="card-info-page">
		<!-- 导航栏 -->
		<free-nav-bar textContent="銀行卡" isBackShow></free-nav-bar>
		<view class="card-wrapper">
			<view class="card-item flex">
				<view class="card-item-left flex">
					<view class="card-logo"></view>
					<view class="card-info">
						<span class="name">招商银行</span>
						<span class="card-number">****   ****   ****  6789</span>
					</view>
				</view>
				<view class="card-btn">
					<a href="javascript:;">刪除</a>
				</view>
			</view>
			<view class="card-item flex">
				<view class="card-item-left flex">
					<view class="card-logo"></view>
					<view class="card-info">
						<span class="name">招商银行</span>
						<span class="card-number">****   ****   ****  6789</span>
					</view>
				</view>
				<view class="card-btn">
					<a href="javascript:;">刪除</a>
				</view>
			</view>
			<view class="card-item flex">
				<view class="card-item-left flex">
					<view class="card-logo"></view>
					<view class="card-info">
						<span class="name">招商银行</span>
						<span class="card-number">****   ****   ****  6789</span>
					</view>
				</view>
				<view class="card-btn">
					<a href="javascript:;">刪除</a>
				</view>
			</view>
			
			<view class="card-wrapper btns flex">
				<view class="btn main-text-color font28 flex"><i class="sprite sprite-add"></i>添加银行卡</view>
			</view>
		</view>
		<hqs-popup title="种植果类" v-model="showPopup">
		    <view>弹窗内容</view>
		</hqs-popup>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				showPopup: false,
				params: {
					name: '',
					type: null,
					address: '',
					mode: '',
					desc: '',
					full_name: '',
					phone: '',
					business_license: '',
					status: 0
				}
			}
		},
		created() {
			
		},
		methods: {
			handleFruits() {
				this.showPopup = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-info-page {
		.card-wrapper {
			padding: 0 20rpx;
			padding-top: 20rpx;
		}
		.card-wrapper {
			.card-item {
				width: 100%;
				padding: 30rpx;
				background: #fff;
				border-radius: 4rpx;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.card-logo {
					width: 88rpx;
					height: 88rpx;
					background: pink;
				}
				.card-info {
					margin-left: 20rpx;
					.name {
						display: block;
						height: 88rpx;
						line-height: 88rpx;
						font-size: 30rpx;
						color: #000;
					}
					.card-number {
						display: block;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 36rpx;
						color: #666666;
					}
				}
				.card-btn {
					font-size: 24rpx;
					
					a {
						color: #666666;
						text-decoration: none;
					}
				}
			}
		}
		.btns {
			height: 88rpx;
			align-items: center;
			justify-content: center;
			padding: 0;
			background: #fff;
			border-radius: 4rpx;
			
			i {
				display: inline-block;
				margin-right: 14rpx;
			}
			
			.btn {
				align-items: center;
			}
		}
	}
</style>
